<template>
    <div>
        <div class="login_view">
            <div class="login_view_l" :style="{height: `${height}px`}"></div>
            <div class="login_view_r">
                <div class="login_view_r_main">
                    <div class="login_view_r_logo">
                        <img
                            src="../../assets/images/logo.png"
                            class="login_view_r_logo_icon"
                        />
                    </div>
                    <div class="login_view_r_main_title">注册</div>
                    <div class="login_view_r_main_form">
                        <div class="login_view_r_main_form_control">
                            {{params.role ? rolename : '请选择身份'}}
                            <img
                                src="../../assets/images/down.png"
                                class="login_view_r_main_form_control_icon"
                            />
                            <div class="login_view_r_main_form_control_list">
                                <div class="login_view_r_main_form_control_list_item" @click="params.role = 1, rolename = '设计师'">
                                    设计师
                                </div>
                                <div class="login_view_r_main_form_control_list_item" @click="params.role = 2, rolename = '业主'">
                                    业主
                                </div>
                                <div class="login_view_r_main_form_control_list_item" @click="params.role = 3, rolename = '销售'">
                                    销售
                                </div>
                                <div class="login_view_r_main_form_control_list_item" @click="params.role = -1, rolename = '其他'">
                                    其他
                                </div>
                            </div>
                        </div>
                        <div class="login_view_r_main_form_control">
                            <input
                                type="text"
                                class="login_view_r_main_form_control_value"
                                placeholder="请输入手机号"
                                v-model="params.phone"
                                autocomplete="false"
                            />
                        </div>
                        <div class="login_view_r_main_form_control">
                            <input
                                type="text"
                                class="login_view_r_main_form_control_value"
                                placeholder="请输入验证码"
                                v-model="params.code"
                                autocomplete="false"
                            />
                            <div class="login_view_r_main_form_control_forget" @click="getCode">{{btnText}}</div>
                        </div>
                        <div class="login_view_r_main_form_control">
                            <input
                                type="text"
                                class="login_view_r_main_form_control_value"
                                placeholder="请输入名称"
                                v-model="params.username"
                                autocomplete="off"
                            />
                        </div>
                        <div class="login_view_r_main_form_control">
                            <input
                                type="password"
                                class="login_view_r_main_form_control_value"
                                placeholder="请输入密码"
                                v-model="params.password"
                                autocomplete="new-password"
                            />
                        </div>
                        <!-- <div class="login_view_r_main_form_control">
                            <input
                                type="text"
                                class="login_view_r_main_form_control_value"
                                placeholder="推荐人手机号"
                                v-model="params.recommendPhone"
                                autocomplete="false"
                            />
                        </div> -->
                    </div>
                    <div class="login_view_r_main_submit" @click="submit">
                        注册
                    </div>
                    <div class="login_view_r_main_register">已有账号? <label @click="login">立即登录</label></div>
                    <div class="login_view_r_main_register">
                        您已阅读并同意
                        <label @click="agreement">《服务协议》</label>
                        及
                        <label @click="treaty">《隐私协议》</label>
                    </div>
                </div>
            </div>
        </div>
        <FooterBar />
    </div>
</template>
<script>
import {
    GetVerifyCode,
    PostRegister
} from '@api/api';
import FooterBar from '@components/Footer';
export default {
    data() {
        return {
            rolename: '',
            params: {
                role: null,
                phone: '',
                code: '',
                username: '',
                password: '',
                recommendPhone: ''
            },
            timer: 60,
            btnText: '获取验证码',
            siv: null,
            flag: true,
            height: null
        }
    },
    components: {
        FooterBar
    },
    created () {
        if (this.$route.query.inviteCode) {
            this.params.recommendPhone = window.atob(this.$route.query.inviteCode);
        }
    },
    mounted() {
        this.height = document.body.clientHeight - 60;
    },
    methods: {
        login() {
            this.$router.push({path: '/login'})
        },
        getCode() {
            let _this = this;
            let {
                params
            } = _this;
            let reg = /^1[3456789]\d{9}$/;
            if (!reg.test(params.phone)) {
                _this.$message.error('请输入正确的手机号!');
                return;
            }
            if (_this.flag) {
                GetVerifyCode({phone: params.phone})
                    .then(res=>{
                        _this.$message({
                            message: '验证码已发送!',
                            type: 'success'
                        });
                        _this.siv = setInterval(() => {
                            let timer = _this.timer - 1;
                            _this.timer = timer;
                            _this.btnText = `${timer}s后重新获取`;
                            _this.flag = false;
                            if (_this.timer == 0) {
                                _this.flag = true;
                                _this.timer = 60;
                                _this.btnText = '获取验证码';
                                clearInterval(_this.siv);
                            }
                        }, 1000);
                    });
            }
        },
        submit() {
            let {
                params
            } = this;
            if (!params.role) {
                this.$message.error('请选择身份!');
                return;
            }
            if (!params.phone) {
                this.$message.error('请输入手机号!');
                return;
            }
            if (!params.code) {
                this.$message.error('请输入验证码!');
                return;
            }
            if (!params.username) {
                this.$message.error('请输入用户名!');
                return;
            }
            if (!params.password) {
                this.$message.error('请输入密码!');
                return;
            }
            if (params.role == -1) {
                params.role = 0;
            }
            PostRegister(params)
                .then(res=>{
                    this.$message({
                        message: '注册成功!',
                        type: 'success'
                    });
                    this.$router.push({path: '/login'});
                })
        },
        agreement() {
            this.$router.push({path: '/agreement'});
        },
        treaty() {
            this.$router.push({path: '/treaty'});
        },
    }
}
</script>
<style scoped>
    .login_view{
        display: flex;
        justify-content: space-between;
        width: 100vw;
        height: 100vh;
    }
    .login_view_l {
        width: 699px;
        background-image: url('../../assets/images/login/bg.png');
        background-size: cover;
        background-repeat: no-repeat;
        z-index: 9999
    }
    .login_view_r {
        flex: 1;
        padding-top: 56px;
        text-align: center;
        position: relative;
    }
    .login_view_r_main {
        width: 400px;
        margin: 0 auto;
    }
    .login_view_r_logo {
        height: 70px;
        margin-bottom: 31px;
    }
    .login_view_r_main_title {
        height: 22px;
        font-size: 22px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #1D242D;
        line-height: 22px;
        margin-bottom: 39px;
    }
    .login_view_r_logo_icon {
        width: 279px;
        height: 70px;
    }
    .login_view_r_tabs {
        display: flex;
        justify-content: center;
        margin-bottom: 39px;
    }
    .login_view_r_tabs_item {
        cursor: pointer;
        height: 20px;
        font-size: 20px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #1D242D;
        /* color: #CEB68A; */
        line-height: 38px;
        padding-bottom: 18px;
        position: relative;
    }
    .login_view_r_tabs_item:first-child {
        margin-right: 113px;
    }
    .login_view_r_tabs_item.active {
        color: #CEB68A;
        font-weight: 500;
    }
    .login_view_r_tabs_item.active::after {
        content: '';
        position: absolute;
        left: 50%;
        bottom: -17px;
        transform: translateX(-50%);
        width: 62px;
        height: 3px;
        background: #CEB68A;;
        border: 2px solid #CEB68A;
    }
    .login_view_r_main_form {
        margin-bottom: 20px;
    }
    .login_view_r_main_form_control {
        width: 400px;
        height: 50px;
        line-height: 50px;
        background: #FFFFFF;
        border: 1px solid #C4C5CB;
        border-radius: 4px;
        position: relative;
        padding: 18px 9 18px 19px;
        margin-bottom: 30px;
        text-indent: 19px;
        text-align: left;
        color: #000;
    }
    .login_view_r_main_form_control:last-child {
        margin-bottom: 20px;
    }
    .login_view_r_main_form_control:hover .login_view_r_main_form_control_list {
        display: block;
    }
    .login_view_r_main_form_control_list {
        position: absolute;
        left: 0;
        top: 50px;
        width: 100%;
        z-index: 99;
        background: #ffffff;
        display: none;
        border: 1px solid #C4C5CB;
    }
    .login_view_r_main_form_control_list_item {
        width: 100%;
        height: 50px;
        line-height: 50px;
        text-indent: 19px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #333333;
        cursor: pointer;
    }
    .login_view_r_main_form_control:last-child {
        margin-bottom: 0;
    }
    .login_view_r_main_form_control_icon {
        position: absolute;
        width: 18px;
        height: 10px;
        top: 19px;
        right: 20px;
        z-index: 88;
    }
    .login_view_r_main_form_control_value {
        width: 285px;
        height: 50px;
        line-height: 50px;
        border: none;
        outline: none;
        position: absolute;
        top: 0px;
        left: 19px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #000;
    }
    .login_view_r_main_form_control_value::placeholder {
        color: #AFB1B9;
    }
    .login_view_r_main_form_control_forget {
        position: absolute;
        top: 18px;
        right: 19px;
        height: 14px;
        line-height: 14px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #1D242D;
        cursor: pointer;
    }
    .login_view_r_main_submit {
        cursor: pointer;
        width: 400px;
        text-align: center;
        height: 50px;
        line-height: 50px;
        background: #1D242D;
        border-radius: 25px;
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #CEB68A;
        margin-bottom: 20px;
    }
    .login_view_r_main_register {
        width: 100%;
        text-align: center;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #AFB1B9;
        line-height: 38px;
    }
    .login_view_r_main_register label {
        color: #CEB68A;
        cursor: pointer;
    }
</style>